<template>
	<view>
		<view class="head">
			<!-- 顶部 -->
			<u-navbar title="我的好友" title-color="#fff" :background="background"></u-navbar>
		</view>

		<view class="content">
			<!-- 内容 -->
			<u-tabs :list="list" :is-scroll="false" :current="current" activeColor="#ffaa00" @change="change"></u-tabs>
			<u-index-list :scrollTop="scrollTop" :index-list="indexList">
				<view v-for="(item, index) in friends" :key="index">
					<u-index-anchor :index="item.letter" />
					<u-modal title="备注" v-model="memoShow" @confirm="confirmMemo">
						<view><u-input v-model="memo" style="padding-left: 40rpx; padding-right: 40rpx;"></u-input></view>
					</u-modal>
					<u-card
						class="u-card-ime"
						:head-border-bottom="false"
						:foot-border-top="false"
						padding="0"
						margin="10rpx"
						v-for="(item1, index1) in item.data"
						:title-bold="false"
						:border="false"
					>
						<view class="u-card-head" slot="head" @longpress="more(item1, index)">
							<view class="u-card__head u-flex u-row-left">
								<view class="u-m-r-10">
									<u-avatar
										:src="item1.avatar"
										mode="circle"
										:show-level="item1.level === 1 ? true : false"
										level-bgColor="#E6E6FA"
										level-icon="https://z3.ax1x.com/2021/08/11/fNlfwd.png"
										@click="showUserInfo(item1.uid)"
									></u-avatar>
								</view>
								<view class="u-flex-1" style="margin-left: 20rpx; width: 80%;">
									<view style="float: left;" class="u-font-18 u-p-b-20" @click="intoChat(item1, index)">{{ item1.username }}</view>
									<view style="float: right; margin-right: 20rpx;" class="u-m-l-10 u-p-10" v-if="item1.mutual == true">
										<view class="u-font-13 u-tips-color" style="border: 1rpx solid #FF4B9D; color: #FF4B9D; padding: 3rpx 10rpx;" @click="follow(item1.uid)">
											互相关注
										</view>
									</view>
									<view style="float: right; margin-right: 20rpx;" class="u-m-l-10 u-p-10" v-if="item1.mutual == false">
										<view
											class="u-font-13 u-tips-color"
											style="border: 1rpx solid #999999; padding: 3rpx 10rpx;"
											v-if="current == 0"
											@click="follow(item1.uid)"
										>
											已关注
										</view>
										<view
											class="u-font-13 u-tips-color"
											style="border: 1rpx solid #FF4B9D; color: #FFFFFF; background-color: #FF4B9D; padding: 3rpx 10rpx;"
											@click="follow(item1.uid)"
											v-if="current == 1"
										>
											关注
										</view>
									</view>
									<view style="clear: both; text-overflow: ellipsis; margin-top: 10rpx;" class="u-font-14 u-tips-color u-line-1">{{ item1.sign }}</view>
								</view>
							</view>
						</view>
					</u-card>
				</view>
			</u-index-list>
			<u-action-sheet :list="menu" v-model="show" @click="menuSelect"></u-action-sheet>
			<u-toast ref="uToast" />
			<u-empty style="margin-top: 300rpx;" icon-size="240" color="#7d7d7d" icon-color="#7d7d7d" font-size="35" :text="msg" mode="message" :show="showEmpty"></u-empty>
		</view>
	</view>
</template>

<script>
import { getMyFriend, changeMemo,followUser } from '@/service/messageService.js';
export default {
	data() {
		return {
			background: {
				//backgroundColor: '#F5F5F5',

				// 导航栏背景图
				// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
				// 还可以设置背景图size属性
				// backgroundSize: 'cover',

				// 渐变色
				backgroundImage: 'linear-gradient(100deg, rgb(0,130,138), rgb(76,167,173))'
			},
			scrollTop: 0,
			indexList: [],
			friends: [],
			showEmpty: false,
			msg: '暂无好友',
			item: {},
			list: [
				{
					name: '我的关注'
				},
				{
					name: '关注我的'
				}
			],
			show: false,
			menu: [],
			current: 0,
			list1: [
				{
					text: '备注',
					color: 'blue'
				},
				{
					text: '取消关注',
					color: 'red'
				}
			],
			list2: [
				{
					text: '关注ta',
					color: 'pink'
				}
			],
			memo: '',
			memoShow: false
		};
	},
	onLoad() {
		getMyFriend({ type: this.current }).then(this.getMyFriend);
	},
	methods: {
		getMyFriend(e) {
			if (e.code == 200) {
				this.showEmpty = false;
				this.friends = e.result;
				this.indexList = this.friends.map(val => {
					return val.letter;
				});
			} else {
				this.showEmpty = true;
				this.msg = e.msg;
			}
		},

		showUserInfo(uid) {
			this.$u.route({
				url: '/pages/user/user-info',
				params: {
					uid: uid
				}
			});
		},
		intoChat(item) {
			this.$u.route({
				url: '/pages/message/chat',
				params: {
					uid: item.uid,
					username: item.username,
					avatar: item.avatar,
					level: item.level
				}
			});
		},
		change(index) {
			this.current = index;
			this.friends = [];
			this.indexList = [];
			getMyFriend({ type: this.current }).then(this.getMyFriend);
		},

		follow(uid) {
			followUser({ uid: uid }).then(this.result);
		},
		result(e) {
			if (e.code == 200) {
				this.$refs.uToast.show({
					title: e.msg,
					type: 'success'
				});
			} else {
				this.$refs.uToast.show({
					title: e.msg,
					type: 'warning'
				});
			}
			this.friends = [];
			this.indexList = [];
			getMyFriend({ type: this.current }).then(this.getMyFriend);
		},
		more(item, index) {
			this.item = item;
			if (this.current == 0) {
				this.menu = this.list1;
			} else {
				if (this.item.mutual == true) {
					this.menu = this.list1;
				} else {
					this.menu = this.list2;
				}
			}
			this.show = true;
		},
		menuSelect(index) {
			if (this.current == 0) {
				if (index == 0) {
					this.memoShow = true;
					this.memo = this.item.username;
				} else {
					this.follow(this.item.uid);
				}
			} else {
				this.follow(this.item.uid);
			}
		},
		confirmMemo() {
			changeMemo({ fuid: this.item.uid, memo: this.memo }).then(this.result);
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	}
};
</script>

<style lang="scss" scoped>
.list-cell {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 24rpx;
	overflow: hidden;
	color: #323233;
	font-size: 14px;
	line-height: 24px;
	background-color: #fff;
}
.navbar-right {
	margin-right: 24rpx;
	display: flex;
}
.right-item {
	margin: 0 15rpx;
	position: relative;
	color: #0060f7;
	display: flex;
}
.u-card-ime {
	padding-top: 15rpx;
	padding-left: 0rpx;
	padding-right: 10rpx;
}
</style>
